<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户信息 - AVR</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/CSS/User/home.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/CSS/User/UserInformation.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>

<script>
    let channelList =JSON.parse(sessionStorage.getItem("channelList"));
    const contextPath = "${pageContext.request.contextPath}";
    const userId=${user.userId};
    const userName='${user.userName}';
    const genderValue=${user.gender};
    const email='${user.email}';
</script>

<body>
<!-- 左侧导航栏 -->
<div class="sidebar">
    <div class="sidebar-header">
        <a href="${pageContext.request.contextPath}/User/home?email=${user.email}" class="logo" id="logo">AVR</a>
    </div>

    <div class="nav-buttons">
        <a href="#" class="nav-button" id="private-message">
            <i class="fas fa-envelope"></i>
            <span>私信</span>
        </a>
        <a href="${pageContext.request.contextPath}/User/discover?email=${user.email}" class="nav-button" id="discover">
            <i class="fas fa-compass"></i>
            <span>发现</span>
        </a>
        <a href="${pageContext.request.contextPath}/accompany?email=${user.email}" class="nav-button" id="play-together">
            <i class="fas fa-gamepad"></i>
            <span>陪玩</span>
        </a>
    </div>

    <div class="channels-container" id="channels-container">
        <!-- 频道列表将通过JavaScript动态生成 -->
    </div>

    <div class="user-profile" id="user-profile">
        <a href="${pageContext.request.contextPath}/User/userInformation?email=${email}" id="user_a">
            <img src="${user.avatar}" alt="" id="user_img">
            <span class="username">${user.userName}</span>
        </a>
    </div>
</div>

<!-- 主内容区 -->
<div class="main-content">
    <!-- 顶部导航栏 -->
    <div class="top-nav">
        <div></div> <!-- 占位空div -->

        <div class="nav-buttons-right">
            <a href="${pageContext.request.contextPath}/admin/addfunds" class="nav-button-right" id="shop">
                <i class="fas fa-shopping-cart"></i>
                <span>充值</span>
            </a>
            <a href="#" class="nav-button-right" id="messages">
                <i class="fas fa-bell"></i>
                <span>消息</span>
            </a>
            <div class="dropdown" id="messages-dropdown">
                <div class="dropdown-header">回复我的</div>
                <a href="#" class="dropdown-item">@我的</a>
                <a href="#" class="dropdown-item">我的帖子</a>
                <a href="#" class="dropdown-item">我的回复</a>
                <a href="#" class="dropdown-item">我的收藏</a>
                <div class="dropdown-divider"></div>
                <div class="dropdown-empty">暂时没有数据</div>
            </div>

            <a href="#" class="nav-button-right" id="follow">
                <i class="fas fa-heart"></i>
                <span>关注</span>
            </a>
            <div class="dropdown" id="follow-dropdown">
                <div class="dropdown-header">关注</div>
                <a href="#" class="dropdown-item">关注的人</a>
                <a href="#" class="dropdown-item">关注的社区</a>
                <a href="#" class="dropdown-item">关注的话题</a>
                <div class="dropdown-divider"></div>
                <div class="dropdown-empty">暂时没有数据</div>
            </div>

            <a href="#" class="nav-button-right" id="search">
                <i class="fas fa-search"></i>
                <span>搜索</span>
            </a>
            <div class="dropdown" id="search-dropdown">
                <div class="dropdown-header">搜索</div>
                <div class="dropdown-empty">输入关键词搜索内容</div>
            </div>
        </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-area">
        <div class="content-container" id="content-container">
            <div class="user-profile-container">
                <h2 class="profile-title">用户信息设置</h2>
                <form id="user-profile-form" class="profile-form">
                    <div class="form-section">
                        <h3 class="section-title">
                            <i class="fas fa-user-circle"></i>
                            基本信息
                        </h3>

                        <div class="form-row">
                            <div class="form-group">
                                <label for="username" class="form-label">
                                    <i class="fas fa-user"></i> 用户名
                                </label>
                                <input type="text" id="username" name="username" class="form-input" value="${user.userName}">
                            </div>

                            <div class="form-group">
                                <label for="password" class="form-label">
                                    <i class="fas fa-lock"></i> 密码
                                </label>
                                <input type="password" id="password" name="password" class="form-input" required>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group">
                                <label for="gender" class="form-label">
                                    <i class="fas fa-venus-mars"></i> 性别
                                </label>
                                <select id="gender" name="gender" class="form-input">
                                    <option value="0">未知</option>
                                    <option value="1">男</option>
                                    <option value="2">女</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="age" class="form-label">
                                    <i class="fas fa-birthday-cake"></i> 年龄
                                </label>
                                <input type="number" id="age" name="age" class="form-input" min="1" max="120"  value="${user.age}">
                            </div>
                        </div>
                    </div>

                    <div class="form-section">
                        <h3 class="section-title">
                            <i class="fas fa-address-book"></i>
                            联系方式
                        </h3>

                        <div class="form-group">
                            <label for="phone" class="form-label">
                                <i class="fas fa-phone"></i> 手机号
                            </label>
                            <input type="tel" id="phone" name="phone" class="form-input" pattern="[0-9]{11}"  value="${user.phone}">
                        </div>

                        <div class="form-group">
                            <label for="email" class="form-label">
                                <i class="fas fa-envelope"></i> 邮箱
                            </label>
                            <input type="email" id="email" name="email" class="form-input"  value="${user.email}">
                        </div>
                    </div>

                    <div class="form-section">
                        <h3 class="section-title">
                            <i class="fas fa-camera"></i>
                            头像设置
                        </h3>

                        <div class="avatar-upload">
                            <div class="avatar-preview-container">
                                <img src="${user.avatar}" alt="" id="avatar-preview">
                                <div class="avatar-overlay">
                                    <i class="fas fa-camera"></i>
                                    <span>更换头像</span>
                                </div>
                            </div>
                            <div class="avatar-upload-controls">
                                <button type="button" class="btn btn-primary" id="upload-btn">
                                    <i class="fas fa-upload"></i> 上传头像
                                </button>
                                <button type="button" class="btn btn-secondary" id="reset-avatar-btn">
                                    <i class="fas fa-redo"></i> 恢复默认
                                </button>
                                <!-- 隐藏的文件input -->
                                <input type="file" id="avatar-upload" accept="image/*" style="display:none;">
                            </div>
                        </div>
                    </div>

                    <div class="form-actions">
                        <button type="button" class="btn btn-secondary" id="cancel-btn">
                            <i class="fas fa-times"></i> 取消
                        </button>
                        <button type="submit" class="btn btn-primary" id="save-btn">
                            <i class="fas fa-save"></i> 保存更改
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 创建频道浮层 -->
<div class="modal-overlay" id="create-channel-modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 class="modal-title">创建频道</h3>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label class="form-label">频道名称</label>
                <input type="text" class="form-input" id="channel-name" placeholder="输入频道名称" required>
            </div>

            <div class="form-group">
                <label class="form-label">频道封面</label>
                <!-- 修改为矩形封面预览区域 -->
                <div class="cover-upload">
                    <label for="channel-cover" class="cover-pw" id="cover-pw">
                        <i class="fas fa-image"></i>
                        <span>点击上传封面 (281x140)</span>
                    </label>
                    <input type="file" id="channel-cover" accept="image/*" style="display: none;">
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">频道种类</label>
                <select class="form-input" id="channel-category">
                    <option value="射击游戏">射击游戏</option>
                    <option value="MOBA">MOBA</option>
                    <option value="MMORPG">MMORPG</option>
                    <option value="休闲游戏">休闲游戏</option>
                    <option value="解谜游戏">解谜游戏</option>
                    <option value="其他">其他</option>
                </select>
            </div>

            <div class="form-group">
                <label class="form-label">频道描述</label>
                <textarea class="form-input" id="channel-desc" placeholder="输入频道描述（可选）" rows="3"></textarea>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" id="cancel-create-channel">
                <i class="fas fa-times"></i> 取消
            </button>
            <button class="btn btn-primary" id="confirm-create-channel">
                <i class="fas fa-plus"></i> 创建
            </button>
        </div>
    </div>
</div>

<script src="${pageContext.request.contextPath}/static/JS/User/home.js"></script>
<script src="${pageContext.request.contextPath}/static/JS/User/userInformation.js"></script>

</body>
</html>
